<!DOCTYPE html>
<html>


<style>
  .layui-btn {
    padding: 0 7px !important;
  }
  .layui-form-label{
    width: 100px !important;
  }
</style>
<div style="margin-top: 1%;">
  <form class="layui-form" action="">

    <div class="layui-form-item ">
      <div class="layui-inline ">
        <label class="layui-form-label">房间号:</label>
        <div class="layui-input-inline">
          <input type="tel" id="fjhval" autocomplete="off" class="layui-input" value="">
        </div>
      </div>

      <!--<div class="layui-form-item layui-col-xs12">-->
      <div class="layui-inline">
        <label class="layui-form-label">Mac地址:</label>
        <div class="layui-input-inline">
          <input type="text" id="macval" autocomplete="off" class="layui-input" value="">
        </div>
      </div>
      <!--</div>-->

      <!--<div class="layui-form-item layui-col-xs12">-->
      <div class="layui-inline">
        <label class="layui-form-label">锁定状态:</label>
        <div class="layui-input-inline">
          <select id="zhuangtaival">请选择
            <option value=""></option>
            <option value="正常">正常</option>
            <option value="已锁定">已锁定</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button type="button" class="layui-btn" id="serchdata">搜索</button>
      </div>
    </div>
  </form>
</div>




<div style="padding-left: 50px;">
  <caption style="margin-left: 40px;"><span >
                <button type="button" class="btn btn-primary layui-btn"  onclick="method5('tableExcel')">
                    <span class="glyphicon glyphicon-folder-open">导出Excel</span>
                </button>
            </span>
  </caption>
</div>

<div id="demo"></div>
</div>
<table class="layui-table" id="terminaldata" lay-filter="terminaldata">

</table>
</html>
<script type="text/html" id="tol">
  <div>
    <div style="float:left;">终端统计列表</div>
    <div style="float:right;margin-right: 50px">共有数据：<span id="zong"></span>条</div>
  </div>
</script>
<script type="text/html" id="chakao">
  <button type="button" class="layui-btn" lay-event="lishi">查看记录</button>


</script>
<script>


  var local_store = layui.data("local_store");
  var local = local_store.token;
  $.ajax({
    type:"get",
    url:"/admin/station/query/stationLoginQuanxXian?stationId="+json.id,
    dataType: "json",
    contentType:"application/json;charset=utf-8",
    beforeSend: function(request) {
      request.setRequestHeader("token", local);
    },
    success:function (res) {
      if(res.code==500){
        alert("权限不足")
        location="../../admin/main.html";
        return
      }}})
  function GetRequest() {
    var url = decodeURI(location.search); //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
        theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
    }
    return theRequest;
  }

  var json=GetRequest();

  var pages= localStorage.getItem('page');

  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem:"#terminaldata",
      id:"t",
      toolbar:"#tol",
      method:"get",
      url:"/admin/terminal/querysystemStatistics?terminalStation="+json.id,
      cols:[[
        // {checkbox: true, fixed: true}
        {field:'terminal_id', title: '终端编号', width: "10%",
          align: "center"}
        ,{field:'terminal_ip', title: 'IP地址',width: "10%",
          align: "center"}
        ,{field:'terminal_mac', width: "12%",
          align: "center", title: 'MAC地址'}
        ,{field:'terminal_lock',width: "10%",
          align: "center",  title: '状态'}
        ,{field:'terminal_room', title: '房间号',width: "12%",
          align: "center"} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
        ,{field:'group_name', width: "12%",
          align: "center", title: '所属站点'}
        ,{field:'terminal_total_online_time',width: "15%",
          align: "center",  title: '在线时长（天）',
              templet: "<div> {{  Format(d.terminal_total_online_time,'yyyy-MM-dd hh:mm:ss')}}</div>"
          }
        ,{
          title:'操作',
          align:'center',
          toolbar:'#chakao',
          fixed: 'right'
        }
      ]],page:true,
      limit:40,
      done: function(res, curr, count){
        localStorage.setItem('page',curr);
        $("#zong").html(count);
      }
    });

      table.on('tool(terminaldata)',function(obj){
          var getdata=obj.data; //获取当前行数据
          var layEvent=obj.event; //获取lay-event对应的值,(也可以是表头的event参数对应的值)
          var tr=obj.tr; //获取当前行tr的DOM对象(如果有的话)
          switch(layEvent){
              case "lishi":
                  layui.data("s",{key:"terminal",value:getdata});
                  layer.open({
                      title:"历史记录",
                      type:2,
                      content:'/admin/station_config/views/layui/lishi.html',
                      area:['800px','500px']
                  });
                  break;
          }
      });

    $("#serchdata").click(function(){
      table.reload("t",{
        where:{
          terminalRoom:$("#fjhval").val(),
          terminalMac:$("#macval").val(),
          terminalLock:$("#zhuangtaival").val()
        },
        page:{
          curr:1
        }
      });
    });
  });



<!--table日期转换格式-->

    function Format(datetime,fmt) {
        if (parseInt(datetime)==datetime) {
            if (datetime.length==10) {
                datetime=parseInt(datetime)*1000;
            } else if(datetime.length==13) {
                datetime=parseInt(datetime);
            }
        }
        datetime=new Date(datetime);
        var o = {
            "M+" : datetime.getMonth()+1,                 //月份
            "d+" : datetime.getDate(),                    //日
            "h+" : datetime.getHours(),                   //小时
            "m+" : datetime.getMinutes(),                 //分
            "s+" : datetime.getSeconds(),                 //秒
            "q+" : Math.floor((datetime.getMonth()+3)/3), //季度
            "S"  : datetime.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }
</script>

<script>

  //导出表格
  var idTmr;
  function  getExplorer() {
    var explorer = window.navigator.userAgent ;
    //ie
    if (explorer.indexOf("MSIE") >= 0) {
      return 'ie';
    }
    //firefox
    else if (explorer.indexOf("Firefox") >= 0) {
      return 'Firefox';
    }
    //Chrome
    else if(explorer.indexOf("Chrome") >= 0){
      return 'Chrome';
    }
    //Opera
    else if(explorer.indexOf("Opera") >= 0){
      return 'Opera';
    }
    //Safari
    else if(explorer.indexOf("Safari") >= 0){
      return 'Safari';
    }
  }
  function method5(tableid) {
    if(getExplorer()=='ie')
    {
      var curTbl = document.getElementById(tableid);
      var oXL = new ActiveXObject("Excel.Application");
      var oWB = oXL.Workbooks.Add();
      var xlsheet = oWB.Worksheets(1);
      var sel = document.body.createTextRange();
      sel.moveToElementText(curTbl);
      sel.select();
      sel.execCommand("Copy");
      xlsheet.Paste();
      oXL.Visible = true;

      try {
        var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
      } catch (e) {
        print("Nested catch caught " + e);
      } finally {
        oWB.SaveAs(fname);
        oWB.Close(savechanges = false);
        oXL.Quit();
        oXL = null;
        idTmr = window.setInterval("Cleanup();", 1);
      }

    }
    else
    {
      tableToExcel(tableid)
    }
  }
  function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
  }
  var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
            base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function(s, c) {
              return s.replace(/{(\w+)}/g,
                      function(m, p) { return c[p]; }) }
    return function(table, name) {
      if (!table.nodeType) table = document.getElementById(table)
      var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
      window.location.href = uri + base64(format(template, ctx))
    }
  })()
  layui.use(['form'], function() {

    var form = layui.form;
    form.render();
  });

</script>

